<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬赏大厅 - 多角色服务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #1890ff, #096dd9);
            color: white;
            padding: 12px 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .location {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        
        .location i {
            margin-right: 5px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
            color: #1890ff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 8px;
            font-weight: bold;
            font-size: 14px;
        }
        
        /* 搜索区域 */
        .search-container {
            padding: 10px 15px;
            background: white;
        }
        
        .search-box {
            display: flex;
            background: #f5f5f5;
            border-radius: 20px;
            padding: 8px 15px;
            align-items: center;
        }
        
        .search-box input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            font-size: 14px;
            margin-left: 10px;
        }
        
        /* 筛选区域 */
        .filters {
            display: flex;
            overflow-x: auto;
            padding: 10px 15px;
            background: white;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .filters::-webkit-scrollbar {
            display: none;
        }
        
        .filter-item {
            padding: 5px 12px;
            background: #f5f5f5;
            border-radius: 15px;
            margin-right: 10px;
            font-size: 13px;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .filter-item.active {
            background: #1890ff;
            color: white;
        }
        
        /* 悬赏任务列表 */
        .bounty-list {
            padding: 10px 15px;
            min-height: calc(100vh - 180px);
        }
        
        .bounty-card {
            background: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .bounty-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            align-items: center;
        }
        
        .bounty-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
        }
        
        .bounty-status {
            font-size: 12px;
            padding: 3px 8px;
            border-radius: 10px;
            background: #f5f5f5;
        }
        
        .status-new {
            background: #e6f7ff;
            color: #1890ff;
        }
        
        .status-ongoing {
            background: #f6ffed;
            color: #52c41a;
        }
        
        .bounty-publisher {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .publisher-avatar {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #eee;
            margin-right: 8px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .publisher-name {
            font-size: 13px;
            color: #666;
        }
        
        .bounty-desc {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .bounty-meta {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #999;
            margin-bottom: 15px;
        }
        
        .bounty-amount {
            font-size: 18px;
            font-weight: bold;
            color: #fa541c;
            text-align: right;
            margin: 5px 0;
        }
        
        .bounty-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        
        .tag {
            font-size: 12px;
            padding: 3px 8px;
            background: #f0f2f5;
            border-radius: 3px;
            margin-right: 5px;
        }
        
        .btn-apply {
            padding: 8px 15px;
            background: #1890ff;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .btn-apply[disabled] {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .phase-info {
            margin: 10px 0;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 5px;
            border-left: 3px solid #1890ff;
        }
        
        .phase-header {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 5px;
        }
        
        .phase-title {
            font-weight: 500;
        }
        
        .phase-status {
            color: #52c41a;
        }
        
        /* TabBar 底部导航 */
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: #fff;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            height: 100%;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }
        
        .tab-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        .tab-label {
            font-size: 11px;
        }
        
        /* 角色差异化样式 */
        /* 普通用户 */
        .user-tab .tab-item:nth-child(2) {
            background: #f0f8ff;
        }
        .user-tab .tab-item:nth-child(2) .tab-icon {
            color: #1890ff;
        }
        
        /* 从业者 */
        .worker-tab .tab-item:nth-child(1) {
            background: #f6ffed;
        }
        .worker-tab .tab-item:nth-child(1) .tab-icon {
            color: #52c41a;
        }
        
        /* 商家 */
        .merchant-tab .tab-item:nth-child(2) {
            background: #fff7e6;
        }
        .merchant-tab .tab-item:nth-child(2) .tab-icon {
            color: #fa8c16;
        }
        
        /* 隐藏其他角色的TabBar */
        .hidden {
            display: none;
        }
        
        /* 浮动发布按钮 */
        .float-btn {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff8a00, #e52e71);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            z-index: 999;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255, 138, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); }
        }
    </style>
</head>
<body>
    <!-- 头部区域 -->
    <div class="header">
        <div class="top-bar">
            <div class="location">
                <i class="fas fa-map-marker-alt"></i>
                <span id="current-city">南宁市</span>
            </div>
            <div class="user-info">
                <div class="avatar">张</div>
                <div class="user-name">张三</div>
            </div>
        </div>
        <div class="id-display">
            <span>平台ID: </span><span id="user-id">NF123456</span>
        </div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-container">
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索悬赏任务、关键词..." id="search-input">
        </div>
    </div>
    
    <!-- 筛选区域 -->
    <div class="filters">
        <div class="filter-item active">全部</div>
        <div class="filter-item">设计类</div>
        <div class="filter-item">开发类</div>
        <div class="filter-item">文案类</div>
        <div class="filter-item">运营类</div>
        <div class="filter-item">咨询类</div>
        <div class="filter-item">数据类</div>
        <div class="filter-item">本地服务</div>
    </div>
    
    <!-- 悬赏任务列表 -->
    <div class="bounty-list">
        <!-- 任务卡片1 -->
        <div class="bounty-card">
            <div class="bounty-header">
                <div class="bounty-title">网站前端开发</div>
                <div class="bounty-status status-new">新发布</div>
            </div>
            
            <div class="bounty-publisher">
                <div class="publisher-avatar">天</div>
                <div class="publisher-name">天行科技 · 企业认证</div>
            </div>
            
            <div class="bounty-desc">
                需要开发公司官网前端页面，需熟悉React框架，响应式设计，要求7天内完成交付。有现成设计稿...
            </div>
            
            <div class="bounty-meta">
                <div>
                    <div>发布时间：2小时前</div>
                    <div>交付截止：3天后</div>
                </div>
                <div class="bounty-amount">￥1200</div>
            </div>
            
            <div class="tag">前端开发</div>
            <div class="tag">React</div>
            <div class="tag">响应式</div>
            
            <div class="bounty-footer">
                <div>已申请：18人</div>
                <button class="btn-apply">申请执行</button>
            </div>
        </div>
        
        <!-- 任务卡片2（分阶段任务） -->
        <div class="bounty-card">
            <div class="bounty-header">
                <div class="bounty-title">移动应用UI设计</div>
                <div class="bounty-status status-ongoing">执行中</div>
            </div>
            
            <div class="bounty-publisher">
                <div class="publisher-avatar">智</div>
                <div class="publisher-name">智能生活 · 平台认证</div>
            </div>
            
            <div class="bounty-desc">
                智能家居控制APP界面设计，需要提供风格稿、主界面设计和完整设计规范。分三个阶段付款...
            </div>
            
            <!-- 分阶段任务信息 -->
            <div class="phase-info">
                <div class="phase-header">
                    <div class="phase-title">第一阶段：风格提案</div>
                    <div class="phase-status">已付款</div>
                </div>
                <div>金额：¥500 | 截止：明天 18:00</div>
            </div>
            
            <div class="bounty-meta">
                <div>
                    <div>发布时间：1天前</div>
                    <div>交付截止：6天后</div>
                </div>
                <div class="bounty-amount">￥3500</div>
            </div>
            
            <div class="tag">UI设计</div>
            <div class="tag">移动端</div>
            <div class="tag">交互设计</div>
            
            <div class="bounty-footer">
                <div>已申请：37人</div>
                <button class="btn-apply">申请执行</button>
            </div>
        </div>
        
        <!-- 任务卡片3 -->
        <div class="bounty-card">
            <div class="bounty-header">
                <div class="bounty-title">产品文案撰写（中英双语）</div>
                <div class="bounty-status status-new">新发布</div>
            </div>
            
            <div class="bounty-publisher">
                <div class="publisher-avatar">海</div>
                <div class="publisher-name">海外优选 · 企业认证</div>
            </div>
            
            <div class="bounty-desc">
                为跨境电商产品撰写产品介绍文案（中英文各一版），需要突出产品特点和优势，吸引目标客户...
            </div>
            
            <div class="bounty-meta">
                <div>
                    <div>发布时间：4小时前</div>
                    <div>交付截止：2天后</div>
                </div>
                <div class="bounty-amount">￥800</div>
            </div>
            
            <div class="tag">文案撰写</div>
            <div class="tag">英文文案</div>
            <div class="tag">产品营销</div>
            
            <div class="bounty-footer">
                <div>已申请：7人</div>
                <button class="btn-apply">申请执行</button>
            </div>
        </div>
        
        <!-- 任务卡片4 -->
        <div class="bounty-card">
            <div class="bounty-header">
                <div class="bounty-title">微信公众号运营（3个月）</div>
                <div class="bounty-status status-ongoing">多人承接</div>
            </div>
            
            <div class="bounty-publisher">
                <div class="publisher-avatar">教</div>
                <div class="publisher-name">教育优选 · 平台认证</div>
            </div>
            
            <div class="bounty-desc">
                长期合作！需要专业的教育领域运营人才，负责公众号内容规划、撰写、排版和数据分析...
            </div>
            
            <div class="bounty-meta">
                <div>
                    <div>发布时间：2天前</div>
                    <div>交付周期：每月考核</div>
                </div>
                <div class="bounty-amount">￥5000/月</div>
            </div>
            
            <div class="tag">公众号运营</div>
            <div class="tag">内容创作</div>
            <div class="tag">教育行业</div>
            
            <div class="bounty-footer">
                <div>已申请：46人</div>
                <button class="btn-apply">申请执行</button>
            </div>
        </div>
    </div>
    
    <!-- 浮动发布按钮 -->
    <div class="float-btn">
        <i class="fas fa-plus"></i>
    </div>
    
    <!-- 普通用户 TabBar -->
    <nav class="tabbar user-tab">
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">接单广场</div>
        </div>
        <div class="tab-item active">
            <div class="tab-icon"><i class="fas fa-tasks"></i></div>
            <div class="tab-label">悬赏大厅</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-graduation-cap"></i></div>
            <div class="tab-label">能力提升</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-industry"></i></div>
            <div class="tab-label">工厂招聘</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">个人中心</div>
        </div>
    </nav>
    
    <!-- 从业者 TabBar -->
    <nav class="tabbar worker-tab hidden">
        <div class="tab-item active">
            <div class="tab-icon"><i class="fas fa-list"></i></div>
            <div class="tab-label">任务大厅</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-wallet"></i></div>
            <div class="tab-label">钱包</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-history"></i></div>
            <div class="tab-label">接单记录</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-star"></i></div>
            <div class="tab-label">信用评级</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </div>
    </nav>
    
    <!-- 商家 TabBar -->
    <nav class="tabbar merchant-tab hidden">
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-chart-line"></i></div>
            <div class="tab-label">店铺数据</div>
        </div>
        <div class="tab-item active">
            <div class="tab-icon"><i class="fas fa-bullhorn"></i></div>
            <div class="tab-label">任务发布</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-users"></i></div>
            <div class="tab-label">客户管理</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-file-invoice"></i></div>
            <div class="tab-label">订单处理</div>
        </div>
        <div class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </div>
    </nav>
    
    <script>
        // 角色切换函数
        function switchRole(role) {
            // 隐藏所有TabBar
            document.querySelectorAll('.tabbar').forEach(tab => {
                tab.classList.add('hidden');
            });
            
            // 显示目标TabBar
            const targetTab = document.querySelector(`.${role}-tab`);
            if (targetTab) {
                targetTab.classList.remove('hidden');
            }
        }
        
        // 为Tab项添加点击事件
        document.querySelectorAll('.tab-item').forEach(item => {
            item.addEventListener('click', function() {
                // 清除同一TabBar中所有项目的激活状态
                const parentTab = this.closest('.tabbar');
                parentTab.querySelectorAll('.tab-item').forEach(el => {
                    el.classList.remove('active');
                });
                
                // 激活当前点击的Tab
                this.classList.add('active');
                
                // 在实际应用中，这里应该加载对应功能的内容
                const actionText = this.querySelector('.tab-label').textContent;
                console.log(`已切换到: ${actionText}`);
            });
        });
        
        // 悬赏申请按钮点击事件
        document.querySelectorAll('.btn-apply').forEach(btn => {
            btn.addEventListener('click', function() {
                const taskTitle = this.closest('.bounty-card').querySelector('.bounty-title').textContent;
                alert(`您已申请执行任务: ${taskTitle}\n等待发布者审核...`);
            });
        });
        
        // 搜索框事件
        document.getElementById('search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                alert(`搜索: ${this.value}`);
            }
        });
        
        // 筛选按钮事件
        document.querySelectorAll('.filter-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.filter-item').forEach(el => {
                    el.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
        
        // 发布悬赏按钮事件
        document.querySelector('.float-btn').addEventListener('click', function() {
            alert('进入发布悬赏流程');
        });
        
        // 初始化显示普通用户 TabBar
        switchRole('user');
    </script>
</body>
</html>